<template>
	<view class="video_page">
		<view class="bbs_waterfall_box">
			<view class="leftbox">
				<view class="mb-10" v-for="(item,index) in list" :key="item.card_id" v-if="index%2==0">
					<view @click="goInfo(item.card_id,index)">
						<view class="bbs_waterfall_images_box">
							<image class="bbs_waterfall_images" :src="item.cover?picUrl+item.cover:picUrl+item.image[0]"
								mode="widthFix"></image>
							<image class="video_list_icon" :src="onlinePic+'video_listicon.png'"></image>
						</view>
						<view class="bbs_waterfall_content">
							<view class="ellipsis-2 f-13" style="letter-spacing: 1rpx;">{{item.title}}</view>
						</view>
					</view>
					<view class="display_flex mt-5" style="padding: 0 15rpx;">
						<view class="flex-1 f-11 c-666666" @click="goInfo(item.card_id,index)">{{item.time_format}}
						</view>
						<view class="display_flex" @click="changeCardPraise(item.card_id,index,item.is_praise)">
							<image v-if="item.is_praise==1" class="bbs_waterfall_zan_icon"
								:src="onlinePic+'video_zan_on.png'">
							</image>
							<image v-else class="bbs_waterfall_zan_icon" :src="onlinePic+'video_zan.png'"></image>
							<view class="bbs_other_text ml-5 c-666666 f-11">{{item.praise_num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="rightbox">
				<view class="mb-10" v-for="(item,index) in list" :key="item.card_id" v-if="index%2!=0">
					<view @click="goInfo(item.card_id,index)">
						<view class="bbs_waterfall_images_box">
							<image class="bbs_waterfall_images" :src="item.cover?picUrl+item.cover:picUrl+item.image[0]"
								mode="widthFix"></image>
							<image class="video_list_icon" :src="onlinePic+'video_listicon.png'"></image>
						</view>
						<view class="bbs_waterfall_content">
							<view class="ellipsis-2 f-13" style="letter-spacing: 1rpx;">{{item.title}}</view>
						</view>
					</view>
					<view class="display_flex mt-5" style="padding: 0 15rpx;">
						<view class="flex-1 f-11 c-666666" @click="goInfo(item.card_id,index)">{{item.time_format}}
						</view>
						<view class="display_flex" @click="changeCardPraise(item.card_id,index,item.is_praise)">
							<image v-if="item.is_praise==1" class="bbs_waterfall_zan_icon"
								:src="onlinePic+'video_zan_on.png'">
							</image>
							<image v-else class="bbs_waterfall_zan_icon" :src="onlinePic+'video_zan.png'"></image>
							<view class="bbs_other_text ml-5 c-666666 f-11">{{item.praise_num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page_bottom_loading" style="padding-bottom:50rpx;">{{loadingTitle}}</view>
		<tab-Bar :tabbarnum="2" :myNoticeNum="isDot" :random="random"></tab-Bar>
	</view>
</template>

<script>
	import {
		getVideoList,
		getClubCardsList,
		changeCardPraise
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				params: {
					page: 1,
					size: 10,
					user_id: 0,
					is_video: 1,
				},
				list: [],
				current_page:'',
				last_page:'',
				loadingTitle: '',
				isDot: 0,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				btnbottom: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? 20 : 10,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets.bottom +
					130 : 130,
			};
		},
		onShow() {
			if (uni.getStorageSync('onload') || uni.getStorageSync('videoload')) {
				this.params.user_id = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : 0
				uni.showLoading({})
				this.userinfo = uni.getStorageSync('userinfo')
				this.params.page = 1
				this.list = []
				this.getVideoList()
				uni.removeStorage({
					key: 'onload'
				})
				uni.removeStorage({
					key: 'videoload'
				})
			}
			if (uni.getStorageSync('userinfo')) {
				if (uni.getStorageSync('userinfo').msg_number > 0 || uni.getStorageSync('userinfo').msg_comment_number >
					0) {
					this.isDot = true
				} else {
					this.isDot = false
				}
			}
			if (uni.getStorageSync('praiseinfo')) {
				var index = parseInt(uni.getStorageSync('praiseinfo').card_index)
				this.list[index].praise_num = uni.getStorageSync('praiseinfo').praise_num
				this.list[index].is_praise = uni.getStorageSync('praiseinfo').is_praise
				uni.removeStorage({
					key: 'praiseinfo'
				})
			}
		},
		onLoad() {
			
			if (uni.getStorageSync('access_token')) {
				this.params.user_id = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : 0
				uni.showLoading({})
				this.params.page = 1
				this.list = []
				if (!uni.getStorageSync('videoload') && !uni.getStorageSync('onload')) {
					this.getVideoList()
				}

			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				this.loadingTitle = "- 暂无更多 -"
			}
			var params = {
				event_code: '视频',
				path: 'pages/video/video',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
			uni.hideTabBar()
		},
		methods: {
			getVideoList() {
				getClubCardsList(this.params).then(res => {
					if (res.state == 1) {
						uni.hideLoading()
						this.list = [...this.list, ...res.data.data]
						this.current_page = res.data.current_page
						this.last_page = res.data.last_page
						if (this.list.length == 0) {
							this.loadingTitle = "- 暂无更多 -"
						}
					} else {
						uni.hideLoading()
						this.loadingTitle = "- 暂无更多 -"
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeCardPraise(card_id, index, type) {
				if (uni.getStorageSync('access_token')) {
					var params = {
						event_code: '视频',
						path: 'pages/video/video',
						event_id: card_id,
						title: this.list[index].title,
						source_page: '视频点赞/取消赞',
					}
					app.BurialPoint(params)
					changeCardPraise({
						card_id: card_id,
						type: type == 1 ? 0 : 1
					}).then(res => {
						if (res.state == 1) {
							this.list[index].praise_num = this.list[index].is_praise == 1 ? this.list[index]
								.praise_num - 1 : this.list[index]
								.praise_num + 1
							this.list[index].is_praise = this.list[index].is_praise == 1 ? 0 : 1
						} else {
							uni.showToast({
								title: res.error[0],
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			goInfo(id, index) {
				var params = {
					event_code: '视频',
					path: 'pages/video/video',
					event_id: id,
					title: this.list[index].title,
					source_page: '点击视频',
					value: '',
				}
				app.BurialPoint(params)
				uni.navigateTo({
					url: '/pages/video/videoinfo?card_id=' + id + '&card_index=' + index
				})

			},
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.list = []
			this.getVideoList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.current_page < this.last_page) {
				this.showLoading = true
				this.params.page = this.params.page + 1
				this.getVideoList()
			} else {
				this.showLoading = false
				if (this.list.length > 0) {
					this.loadingTitle = "- 已经到底了 -"
				} else {
					this.loadingTitle = "- 暂无更多 -"
				}

			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: '斯巴鲁官方车友会',
				imageUrl: this.list.length > 0 ? this.picUrl + this.list[0].pic : ''
			}
		}
	}
</script>

<style lang="scss">
	.video_page {
		padding: 30rpx;

		.bbs_waterfall_box {
			display: flex;
			justify-content: space-between;

			.leftbox {
				width: calc(50% - 10rpx);
				float: left;
				margin-bottom: 20rpx;
			}

			.rightbox {
				width: calc(50% - 10rpx);
				float: left;
				margin-bottom: 20rpx;
			}


			.bbs_waterfall_images_box {
				position: relative;
				width: 100%;
				// max-height: 500rpx;
				border-radius: 8rpx;

				.video_list_icon {
					width: 58rpx;
					height: 58rpx;
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					z-index: 1;
					vertical-align: middle;
				}
			}

			.bbs_waterfall_images {
				width: 100%;
				max-height: 500rpx;
				border-radius: 8rpx;
				vertical-align: middle;
			}

			.bbs_waterfall_content {
				padding: 0 15rpx;
				margin-top: 10rpx;
			}

			.bbs_waterfall_user_info {
				flex: 1;
				display: flex;
				align-items: center;

				.bbs_waterfall_avater_img {
					width: 35rpx;
					height: 35rpx;
					border-radius: 100%;
					vertical-align: middle;
				}
			}

			.bbs_waterfall_zan_icon {
				width: 25rpx;
				height: 25rpx;
				vertical-align: middle;
			}
		}
	}
</style>